<template>
  <div id="id_my_swiper" ref="mySwiper">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="(item, index) in banners" :key="index">
        <a :href="item.link">
          <img :src="item.image" alt="">
        </a>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
    import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'

    //import 'swiper/css/swiper.css'
    // If you use Swiper 6.0.0 or higher
    import 'swiper/swiper-bundle.css'

    export default {
        name: "MySwiper",
        components: {
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                swiperOption: {
                    direction: 'vertical',
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }
                }
            }
        },
        props: {
            banners: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        mounted() {
            console.log('Current Swiper instance object', this.swiper)
            this.swiper.slideTo(3, 1000, false)
        }
    }
</script>

<style scoped>

</style>
